<template>
  <div id="board">
    <van-nav-bar
      @click-left="back"
      left-arrow
      left-text="返回"
      title="留言板"
    />
    <van-empty description="暂无数据" image="error" v-if="list!==undefined&&list.length===0"/>
    <div class="content" v-else>
      <van-pull-refresh
        @refresh="onRefresh"
        success-text="刷新成功"
        v-model="isLoading"
      >
        <van-cell :key="item.id" @click="detail(item)" v-for="item in list">
          <van-row align="center" type="flex">
            <van-col class="avatar" span="6">
              <van-image :src="item.img" alt="" badge="99+" v-if="item.img"><i
                class="van-info" v-show="item.lynums!==0">{{ item.lynums }}</i></van-image>
              <van-image :src="require('@/assets/images/avatar.png')" alt="" v-else><i
                class="van-info" v-show="item.lynums!==0">{{ item.lynums }}</i></van-image>
            </van-col>
            <van-col class="right" span="20">
              <div class="title">
                <span>
                  <span class="name">{{ item.name }}</span>
                  <!-- <van-tag :type="item.ty == '1'?'primary':item.ty == '2'?'success':'warning'" class="tag" plain round>{{
                      item.tyname
                    }}</van-tag> -->
                </span>
                <span class="time">{{ item.lydate }}</span>
              </div>
              <div class="massage">
                <p v-if="item.type == 0">{{ item.info }}</p>
                <p v-else><van-icon name="photo-o" /></p>
              </div>
            </van-col>
          </van-row>
        </van-cell>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import {messagelist} from "@/apis/patient";

export default {
  name: "board.vue",
  data() {
    return {
      list: [],
      isLoading: false,
      img: ''
    };
  },
  methods: {
    detail(item) {
      sessionStorage.setItem('single', JSON.stringify(item))
      this.$router.push({path: `/single`, query: {id: item.id,ysid: item.ysid,gwid: item.gwid}})
    },
    back() {
      this.$router.go(-1); //返回上一层
    },
    boardlist() {
      messagelist({ty:2}).then(res => {
        this.list = res.data.list;
        console.log(this.list)
      })
      .catch(err => {
        if(err.msg){
          this.$toast(err.msg);
        }else{
          this.$toast("网络错误 "); 
        }
      })
    },
    onRefresh() {
      this.boardlist()
      this.isLoading = false;
    },
  },
  mounted() {
    this.boardlist()
  },


}
</script>

<style lang="less">
#board {
  height: 100vh;
  background: #fff;
  .van-nav-bar {
    .van-nav-bar__text,
    .van-icon {
      color: #404040;
    }
  }
  .avatar {
    width: 50px;
    height: 50px;

    .van-image {
      position: relative;

      img {
        border-radius: 50%;
      }

      i {
        top: 8px;

      }
    }
  }

    .content {
    position: relative;
    top: 0px;
    height: 90vh;
    &::-webkit-scrollbar {
      display: none;
    }
    .van-pull-refresh {
      height: 100%;
      overflow: scroll;
      border: none;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }  


  .right {
    margin-left: 10px;

    .name {
      color: #404040;
      font-size: 16px;
      font-weight: 400;
      vertical-align: middle;
    }

    .massage {
      width: 250px;
      overflow: hidden; //超出的文本隐藏
      text-overflow: ellipsis; //溢出用省略号显示
      white-space: nowrap; //溢出不换行
      color: #999999;
      //height: 16px;
    }

    .tag {
      vertical-align: middle;
      padding: 0 5px;
      height: 16px;
      //text-align: center;
      justify-content: center;
    }
  }

  .time {
    float: right;
    font-size: 13px;
    color: #999999;
  }
}
</style>
